<template>
    <div>
        <div class="lines">
            <div class="couple">
                <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 是否成交</label>
                <div class="normal">
                    <img src="@/assets/img/form_switches_on.png" @click="changeIsDeal" v-if="isDeal" />
                    <img src="@/assets/img/form_switches_off.png" @click="changeIsDeal" v-else />
                </div>
            </div>
            <div class="couple">
                <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 到店时间</label>
                <div class="normal" ref="arrivalTime">
                    <el-date-picker
                        size='small'
                        :disabled="disabled" 
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择时间"
                        v-model="arrivalTime"
                        :picker-options="expireTimeOption"
                    />
                </div>
            </div>
        </div>
        <div class="lines" v-if="isDeal">
            <div class="couple" style="width: 60rem;" ref="orderNumber">
                <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 订单编号</label>
                <div class="normal">
                    <el-input size='small' :disabled="true" v-model="orderNumber" />
                    <img src="@/assets/img/order_search.png" @click="openBox" style="width: 32px;height: 32px;"/>
                </div>
            </div>
        </div>
        <div class="lines">
            <div class="couple" ref='choosenGift'>
                <label class="labels">赠送礼品</label>
                <el-select size='small' class="normal" v-model="choosenGift" :disabled="disabled || !hasGift">
                    <el-option
                        v-for="item in giftArr"  
                        :key="item.id"
                        :label="item.Name" 
                        :value="item.Name"
                    />
                </el-select>
            </div>
            <div class="couple" v-if="!hasGift" style="color: #ff3000;justify-content: flex-start;font-size:12px;">
                <p style="margin-left: 8px;">该客户已领取过到店礼，不可再次领取</p>
            </div>
        </div>
        <div class="lines" v-if="!isDeal">
            <div class="couple" ref="failedType">
                <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 未成交原因</label>
                <el-select class="normal" v-model="failedType" :disabled="disabled">
                    <el-option
                        size='small'
                        v-for="item in reasonArr"  
                        :key="item.id"
                        :label="item.value" 
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <div class="lines" v-if="!isDeal" ref="failedExplain">
            <div class="textArea" style="margin-top: 1rem;">
                <label class="labels"><img class="required" src="@/assets/img/flower_red.png" alt=""> 未成交说明</label>
                <el-input type='textarea' rows="5" class="field" v-model="failedExplain" :disabled="disabled">

                </el-input>
            </div>
        </div>
        <!-- 弹出窗 -->
        <el-dialog :visible.sync="dialogView" top="10rem" width="60%" custom-class="verifyFiledBox">
            <div class="common-table-title">
                <div class="common-table-icon"></div>
                <div class="common-table-fl">订单查找</div>
            </div>
            <div class="contentBox">
                <div class="intelCollectBox" style="margin-top: 1rem;">
                    <el-input size='small' style="width: 20rem;" placeholder="输入手机号或身份证号" v-model="searchClue" />
                    <div class="normal-btn query-btn" @click="doSearch"><img class="icon" src="@/assets/img/button_search.png" alt="">查询</div>
                </div>
                <div class="tipCan">仅可查询与关联待审批订单</div>
                <div class="reasonItem">
                    <el-table
                        :data="scheduledListData"
                        :row-style="selectedHighlight"
                        max-height="220"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                            type="selection"
                            width="100"
                            align="center"
                            :selectable="selectFilter"
                        />
                        <el-table-column
                            v-for='(item, index) in scheduledListItem'
                            :key="index"
                            :prop='item.prop'
                            :label='item.label'
                            :width="item.width"
                            align='center'
                        >
                            <template slot-scope="scope">
                                <div>
                                    {{translateData(scope.row, item)}}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                
                <div class="btnsField">
                    <div class="btn" @click="confirm">确定</div>
                    <div class="btn cancel" @click="closeBox">取消</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import datas from './datas.js'
import { orderSearch, getUndealReason, getGiftList } from './axios.js'
export default {
    data() {
        return {
            dialogView: false,
            // 赠送礼品选项
            giftArr: [],
            // 赠送的礼品
            choosenGift: '',
            // 未成交原因选项
            reasonArr: [],
            // 未成交原因
            failedType: '',
            // 未成交说明
            failedExplain: '',
            // 是否成交
            isDeal: true,
            // 弹出框查找订单搜索
            searchClue: '',
            // 弹出框列表项
            scheduledListItem: datas.scheduledListItem,
            // 弹出框列表数据
            scheduledListData: [],
            // 弹出框列表选中项
            TableSelectData: [],
            // 订单编号
            orderNumber: '',
            // 到店时间
            arrivalTime: new Date().Format("yyyy-MM-dd HH:mm:ss"),
            // 是否可以赠送礼品
            hasGift: true,
            expireTimeOption: {
                disabledDate(time) {
                    let date = new Date()
                    let times = date.getTime()
                    let hour = date.getHours()
                    let minute = date.getMinutes()
                    let second = date.getSeconds()
                    let dayTime = times - hour * 3600 * 1000 - minute * 60 * 1000 - second * 1000 - 1000
                    return time.getTime() <= dayTime;
                }
            }
        }
    }, 
    props: {
        isTreat: {},
        disabled: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        doSearch() {
            !this.searchClue && this.$message({
                message: "请输入要查询的信息",
                type: 'warning'
            })
            this.searchClue && orderSearch(this.searchClue).then(res => {
                if(res.data.status === 200) {
                    this.scheduledListData = res.data.result
                }else {
                    this.$message({
                        showClose: true,
                        message: this.data.msg,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        },
        changeIsDeal() {
            this.isDeal ? this.isDeal = false : this.isDeal = true
        },
        // 弹出框确认
        confirm() {
            let str = ''
            this.TableSelectData.map(ele => {
                str += `${ele.OrderID};`
            })
            str = str.substr(0, str.length - 1);
            this.orderNumber = str;
            this.dialogView = false
        },
        // 打开弹出窗
        openBox() {
            this.disabled ? this.$message({
                type: 'warning',
                message: '请先验证手机号'
            }) : this.dialogView = true
        },
        // 关闭弹出窗
        closeBox() {
            this.dialogView = false
        },
        // 弹出框列表内容显示
        translateData(data, item) {
            return data[item.prop]
        },
        // 是否可选
        selectFilter(data) {
            if(data && data.OrderState === 100) {
                return true
            } else {
                return false
            }
        },
        // 选中的数组
        handleSelectionChange (selection) {
            this.TableSelectData = selection;
        },
        // 如果选中则添加高亮样式
        selectedHighlight (data) {
            if (this.TableSelectData.indexOf(data.row) > -1) {
                return {
                    "background-color": "#FEF6EE"
                };
                return {}
            }
        },
        // 获取未成交原因
        getReason() {
            getUndealReason().then(res => {
                if(res.data.status === 200) {
                    this.reasonArr = res.data.result
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        },
        // 获取赠品
        getGifts(phone) {
            getGiftList(phone).then(res => {
                if(res.data.status === 200) {
                    if(res.data.result.status == 3) {
                        this.hasGift = true
                        this.giftArr = res.data.result.giftDTOS
                    }else {
                        this.choosenGift = ''
                        this.hasGift = false
                    }
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        },
        // 获取结果
        getResult() {
            let obj = {};
            obj.isDeal = this.isDeal;
            if(this.isDeal) {
                // this.choosenGift ? this.$refs.choosenGift.classList.remove('qxz_redInput') : this.$refs.choosenGift.classList.add('qxz_redInput')
                this.orderNumber ? this.$refs.orderNumber.classList.remove('qxz_redInput') : this.$refs.orderNumber.classList.add('qxz_redInput')
                if(!this.orderNumber) {
                    return false
                }
            }else {
                this.failedType ? this.$refs.failedType.classList.remove('qxz_redInput') : this.$refs.failedType.classList.add('qxz_redInput')
                this.failedExplain ? this.$refs.failedExplain.classList.remove('qxz_redInput') : this.$refs.failedExplain.classList.add('qxz_redInput')
                if(!this.failedType || !this.failedExplain) {
                    return false
                }
            }
            this.arrivalTime ? this.$refs.arrivalTime.classList.remove('qxz_redInput') : this.$refs.arrivalTime.classList.add('qxz_redInput')
            if(!this.arrivalTime) { return false }
            
            obj.arrivalTime = this.arrivalTime
            !this.isDeal && (obj.notDealReason = this.failedType);
            !this.isDeal && (obj.notDealDescription = this.failedExplain);
            this.choosenGift && (obj.gift = this.choosenGift)
            this.isDeal && (obj.orderId = this.orderNumber)
            return obj
        },
        clearInput() {
            this.failedExplain = ''
            this.arrivalTime = ''
            this.failedType = ''
            this.failedExplain = ''
            this.isDeal = true
            this.choosenGift = ''
        },
        withdrawRedLattice() {
            this.isDeal && this.$refs.orderNumber.classList.remove('qxz_redInput')
            !this.isDeal && this.$refs.failedType.classList.remove('qxz_redInput')
            !this.isDeal && this.$refs.failedExplain.classList.remove('qxz_redInput')
            this.$refs.arrivalTime.classList.remove('qxz_redInput')
        }
    },
    mounted() {
        this.getReason();
    },
    activated() {
        this.clearInput();
        // this.withdrawRedLattice();
        this.TableSelectData = [];
    }
}
</script>
<style scoped>
    .intelCollectBox{
        width: 90%;
        min-width: 40rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .reasonItem{
        width: 90%;
        min-width: 30rem;
        margin: 0 auto;
    }
    .btnsField{
        width: 40%;
        min-width: 25rem;
        margin: 2rem 0 0 0;
        text-align: center
    }
    .normal-btn {
        /* width: 72px; */
        padding: 0 10px;
        height: 32px;
        border-radius: 16px;
        font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16px;
        cursor: pointer;
    }

    .normal-btn img {
        padding-right: 4px;
    }

    .normal-btn .icon {
        width: 12px;
        height: 12px;
        display: block;
        margin-right: 4px;
    }

    .query-btn {
        background-color: #7e6b5a;
        color: #ffffff;
    }

    .contentBox{
        width: 100%;
        height: 26rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .couple{
        width: 30rem;
        display: flex;
        height: 4rem;
        font-size: 1.4rem;
        align-items: center;
        justify-content: center;
        color: #222222;
    }
    .lines{
        width: 100%;
        background: #FFF;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .labels{
        width: 8rem;
        text-align: right;
    }
    .labels img{
        vertical-align: middle;
        margin-bottom: 2px;
    }
    .normal{
        flex: 1;
        align-items: center;
        display: flex;
        margin-left: 1rem;
    }
    .field{
        margin-left: 1rem;
        width: 85%;
        min-width: 20rem;
        resize: none;
    }
    .textArea{
        width: 100%;
        display: flex;
        font-size: 1.4rem;
        align-items: flex-start;
        justify-content: flex-start;
        color: #222222;
    }
    .tipCan{
        color: #7E6B5A; 
        font-size: 14px;
        width: 90%;
    }
    .btn{
        display: inline-block;
        width: 120px;
        font-size: 14px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        background: #7E6B5A;
        color: #FFF;
        cursor: pointer;
        margin: 0 8px;
    }
    .cancel{
        background: #000;
        color: #FFF;
    }
</style>
